<script setup>
import useTokenStore from '@/stores/token';
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useDebounceFn } from '@vueuse/core'

const tokenStore = useTokenStore()
const router = useRouter()

const username = ref("")
const email = ref("")
const password = ref("")
const disabled = computed(() => {
    return username.value.length == 0 || password.value.length == 0
})
const currentTab = ref("login")
const isLoginTap = computed(() => {
    return currentTab.value === 'login'
})

const login = useDebounceFn(async () => {
    const resp = await tokenStore.loginUser(username.value, password.value)
    ElMessage({
        message: resp.msg,
        type: resp.success ? 'success' : 'error',
        duration: 3000
    })
    if (resp.success) {
        setTimeout(() => {
            router.push({name:"home"})
        }, 3000)
    }
}, 500)

const register = useDebounceFn(async () => {
    const resp = await tokenStore.registerUser(username.value, email.value, password.value)
    ElMessage({
        message: resp.msg,
        type: resp.success ? 'success' : 'error',
        duration: 3000
    })
    if (resp.success) {
        setTimeout(() => {
            router.push({name:"home"})
        }, 3000)
    }
}, 500)
</script>

<template>
    <div id="container">
        <div id="title">
            <h1>我的AI论文阅读器</h1>
        </div>
        <div class="input">
            <el-input v-model="username" prefix-icon="User" placeholder="请输入用户名" />
        </div>
        <div class="input" v-if="!isLoginTap">
            <el-input v-model="email" prefix-icon="Message" placeholder="请输入邮箱" />
        </div>
        <div class="input" style="margin-bottom: 10px;">
            <el-input v-model="password" prefix-icon="Lock" placeholder="请输入密码" auto-complete="new-password" show-password/>
        </div>
        <div class="switch-text">
            <span v-if="isLoginTap">
                还没有账号？
                <el-link type="primary" @click="currentTab = 'register'">立即注册</el-link>
            </span>
            <span v-else>
                已有账号？
                <el-link type="primary" @click="currentTab = 'login'">立即登录</el-link>
            </span>
        </div>
        <div class="input">
            <el-button @click="isLoginTap ? login() : register()" style="width: 500px;" type="primary" :disabled="disabled">
                {{ isLoginTap ? "登录" : "注册" }}
            </el-button>
        </div>
    </div>
</template>

<style scoped>
#container {
    /* background: rgba(148, 191, 226, 0.6);
    background: url("/public/login_bg.gif") no-repeat center; */
    height: 100%;
    width: 100%;
    position: fixed;
}
#title {
    text-align: center;
    color: cadetblue;
    margin-top: 200px;
}
.input {
    margin: 20px auto;
    width: 500px;
}
.switch-text {
    margin: 0px auto;
    width: 500px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: #606266;
}
.switch-text .el-link {
    font-size: 14px;
    vertical-align: baseline;
    margin-left: 5px;
}
</style>